<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>面板</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<!--盒子容器  颜色-->
			<div class="panel panel-default">
				<!--具体内容部分-->
				<div class="panel-body">
					Hello World
				</div>
			</div>
			
			<div class="panel panel-success">
				<!--头部-->
				<div class="panel-heading">
					学习的网站
				</div>
				<!--身体的部分-->
				<div class="panel-body">
					<div class="row">
						<div class="col-lg-4">
							<img src="img/5.png" />
						</div>
						<div class="col-lg-4">
							<img src="img/wenzi.jpg" style="width: 100%;height: auto;" />
						</div>
						<div class="col-lg-4">
							希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚
							希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚
							希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚
							希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚
							希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚
							希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚
							<br /><br />
							希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚
							希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚
							希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚
							希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚希望你能来德玛西亚
						</div>
					</div>
					
					
				</div>
				<!--底部-->
				<div class="panel-footer panel-danger">
					www.zhaoxingyu.xyz
				</div>
			</div>

			<div class="panel panel-default">
				<div class="panel-heading">
					阴阳师列表
				</div>
				<div class="panel-body">
					<p>以下是阴阳师列表</p>
				</div>
				<table class="table table-striped table-hover table-bordered">
					<thead>
						<!--<tr class="active">
							<th>表格标题</th>
							<th>表格标题</th>
							<th>表格标题</th>
						</tr>-->
					</thead>
					<tbody>
						<tr class="info">
							<td>表格单元格</td>
							<td>表格单元格</td>
							<td>表格单元格</td>
						</tr>
						<tr class="success">
							<td>表格单元格</td>
							<td>表格单元格</td>
							<td>表格单元格</td>
						</tr>
						<tr class="active">
							<td>表格单元格</td>
							<td>表格单元格</td>
							<td>表格单元格</td>
						</tr>
						<tr class="warning">
							<td>表格单元格</td>
							<td>表格单元格</td>
							<td>表格单元格</td>
						</tr>
					</tbody>
				</table>
			</div>
			
			<!--面板里的列表-->
			<div class="panel panel-danger">
				<div class="panel-heading">
					Hello
				</div>
				<div class="panel-body">
					这个是body
				</div>
				<ul class="list-group">
					<li class="list-group-item">hello1</li>
					<li class="list-group-item">hello1</li>
					<li class="list-group-item">hello1</li>
					<li class="list-group-item">hello1</li>
					<li class="list-group-item">hello1</li>
				</ul>
				
				<div class="panel-footer panel-success">
					作者：zhaoxingyu  
					<p>未经允许<strong>禁止</strong>转载</p>
				</div>
			</div>
		</div>
	</body>
</html>
